<template>
	<view>
		<view class="cont-head">
			<view class="cont-box">
				<text>收货人</text>
				<input v-model="name" placeholder="请填写收货人姓名" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
			</view>
			<image v-show="name" @click="name = ''" src="../../../static/my/add_close.png" mode=""></image>
		</view>
		<u-divider hairline></u-divider>
		<view class="cont-head">
			<view class="cont-box">
				<text>手机号码</text>
				<input v-model="mobile" maxlength="11" placeholder="请填写收货人手机号" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
			</view>
			<image v-show="mobile" @click="mobile = ''" src="../../../static/my/add_close.png" mode=""></image>
		</view>
		<u-divider hairline></u-divider>
		<view class="cont-head">
			<view class="cont-box">
				<text>所在地区</text>
				<input v-model="address" @click="showArea = true" disabled placeholder="省市区县、乡镇等" placeholder-style="font-size: 28rpx; color: #c0c0c0;"/>
			</view>
		</view>
		<u-divider hairline></u-divider>
		<view class="cont-head">
			<view class="cont-box">
				<text>详细地址</text>
				<textarea auto-height v-model="detailAddress" placeholder="街道、小区等" placeholder-style="font-size: 28rpx; color: #c0c0c0;" />
			</view>
		</view>
		<view class="bot-btn">
			<view class="btn-box" @click="save()">添加地址</view>
		</view>
		<u-picker :show="showArea" :columns="columnAreas" keyName="label" @change="changeHandler" closeOnClickOverlay
			@close="showArea = false" @cancel="showArea = false" @confirm="confirmArea" confirmColor="#f18b49"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				userId: '',
				mobile: '',
				address: '',
				detailAddress: '',
				province: '',
				city: '',
				area: '',
				showArea: false,
				columnAreas: [
					[{
						label: '请选择',
						id: '1.2'
					}],
					[{
						label: '请选择',
						id: '1.2'
					}],
					[{
						label: '请选择',
						id: '1.2'
					}]
				]
			}
		},
		onLoad(e) {
			this.userId = e.userId
		},
		async onShow() {
			await this.getAddress("0", "省")
		},
		methods: {
			uniShowToast(tit) {
				uni.showToast({
					title: tit,
					duration: 1500,
					icon: 'none'
				})
			},
			// 获取省市区
			getAddress(id = "0", type = '省') {
				return new Promise(resolve => {
					this.$getHttp(`/gjcApi/area_child?aid=${id}`, {}, res => {
						let arr = [{
							label: '请选择',
							id: '1.2'
						}]
						res.forEach(v => {
							const obj = {
								label: v.area_name,
								id: v.area_id
							}
							arr.push(obj)
						})
						switch (type) {
							case '省':
								this.columnAreas.splice(0, 1, arr)
								break;
							case '市':
								this.columnAreas.splice(1, 1, arr)
								break;
							case '区':
								this.columnAreas.splice(2, 1, arr)
								break;
						}
						resolve()
					})
				})
			},
			//滑动选择地址
			changeHandler(e) {
				switch (e.columnIndex) {
					case 0:
						this.columnAreas.splice(e.columnIndex + 1, 1, {
							label: '请选择',
							id: '1.2'
						})
						this.getAddress(e.value[e.columnIndex].id, '市')
						break;
					case 1:
						this.columnAreas.splice(e.columnIndex + 1, 1, {
							label: '请选择',
							id: '1.2'
						})
						this.getAddress(e.value[e.columnIndex].id, '区')
						break;
				}
			},
			//确认-选择地区
			confirmArea(e) {
				let success = true
				e.indexs.forEach(v => {
					if (v === 0) {
						success = false
					}
				})
				if (!success) {
					uni.showToast({
						icon: "none",
						title: "请选择对应的省市区",
						duration: 1500
					})
				} else {
					let address = ""
					let areaId = []
					e.value.forEach(v => {
						address += v.label
						areaId.push(v.id)
					})
					this.province = areaId[0]
					this.city = areaId[1]
					this.area = areaId[2]
					this.address = address
					this.showArea = false
				}
			},
			// 保存
			save(){
				let mobReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if(this.name == '' && this.mobile == '' && this.province == '' && this.city == '' && this.area == '' && this.detailAddress == ''){
					this.uniShowToast('请完整填写地址信息')
				} else if(this.name == ''){
					this.uniShowToast('收货人不能为空')
				} else if(this.mobile == ''){
					this.uniShowToast('手机号不能为空')
				} else if(this.address == ''){
					this.uniShowToast('省市区地址不能为空')
				} else if(this.detailAddress == ''){
					this.uniShowToast('详细地址不能为空')
				} else if(mobReg.test(this.mobile)){
					this.$getHttp(`/gjcApi/addressSave?accept_name=${this.name}&province=${this.province}&city=${this.city}&area=${this.area}&address=${this.detailAddress}&mobile=${this.mobile}&user_id=${this.userId}`, {}, res => {
						if(res.code == 200){
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							setTimeout(() =>{
								uni.hideToast()
								uni.navigateBack({
									delta: 1
								})
							},1000)
						}
					})
				} else {
					this.uniShowToast('手机号格式错误')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: $uni-model-color;
}
.cont-head{
	display: flex;
	padding: 30rpx;
	align-items: center;
	justify-content: space-between;
	.cont-box{
		display: flex;
		text{
			width: 160rpx;
			font-size: 30rpx;
		}
	}
	image{
		width: 40rpx;
		height: 40rpx;
	}
}
.u-divider{
	margin: 0;
}
.bot-btn{
	bottom: 0;
	width: 750rpx;
	position: fixed;
	padding: 20rpx 150rpx;
	text-align: center;
	.btn-box{
		width: 450rpx;
		color: #FFFFFF;
		padding: 20rpx 0;
		font-size: 28rpx;
		background: #ff914d;
		letter-spacing: 2rpx;
		border-radius: 50rpx;
		text{
			margin-left: 4rpx;
		}
	}
}
</style>
